//我的事务（待我执行的事务）
import React, {Component} from 'react'
import {View, Text, FlatList, TouchableOpacity} from 'react-native'
import Loading from '../common/loading'
import styles from '../../configs/styles'
import {I18n} from '../../configs/enumeration'
import {GetExecutionsApi} from '../../configs/api'
import Helper from '../../helpers'

class Executions extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: navigation.state.params.title
    }
  };

  //初始化props和state
  constructor(props) {
    super(props);
    const params = props.navigation.state.params
    this.state = {
      status_id: params.status_id,
      data: [], //数据源
      loading: true, //是否正在加载
      page: 1,
      flipping: false
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData = () => {
    GetExecutionsApi(this.state.page, this.state.status_id).then((data) => {
      let _data = this.state.data;
      _data.push(...data.executions);
      this.setState({
        data: _data,
        loading: false,
        flipping: false
      })
    })
  };

  refresh = () => {
    this.setState({
      page: 1,
      data: []
    }, () => {
      this.getData()
    })
  };

  //翻页
  Flip = () => {
    if (this.state.flipping) return;
    this.setState({flipping: true, page: this.state.page + 1}, () => {
      this.getData()
    })
  };

  //用于给FlatList的每一条item指定一个key
  _keyExtractor = (item, index) => item.id;

  _applyShow = (apply_id) => {
    return this.props.navigation.navigate('apply_show', {apply_id: apply_id})
  };

  _filter_status = (status_id) => {
    if (this.state.status_id == status_id)
      return
    this.setState({status_id: status_id, data: [], page: 1}, () => {
      this.getData()
    })
  };

  _get_status_style = (status_id) => {
    let base_css = {
      padding: 5,
      paddingBottom: 10,
      borderColor: 'white',
      alignItems: 'center'
    };
    if (this.state.status_id == status_id) {
      base_css.borderBottomWidth = 3
    }
    return base_css
  };

  //每一条item的模板
  _renderItem = ({item}) => {
    const apply = item.apply
    return (
      <TouchableOpacity style={styles.itemContainer} onPress={() => this._applyShow(apply.id)}>
        <View style={{flex: 1}}>
          <Text>【{apply.business_name}】{apply.apply_user}</Text>
          <Text style={{margin: 5}}>{apply.remark}</Text>
        </View>
        <View>
          <Text style={{margin: 5}}>{apply.created_at}</Text>
          <Text style={{margin: 5}}>{item.status_name}</Text>
        </View>
      </TouchableOpacity>
    )

  };
  _topButton = () => {
    // 0=>"待确认",
    // 1=>"已确认"
    return (
      <View style={styles.filter_status}>
        <TouchableOpacity style={this._get_status_style()}
                          onPress={() => (this._filter_status())}>
          <Text style={styles.filter_status_text}>全部</Text>
        </TouchableOpacity>
        <TouchableOpacity style={this._get_status_style(0)}
                          onPress={() => (this._filter_status(0))}>
          <Text style={styles.filter_status_text}>待做</Text>
        </TouchableOpacity>
        <TouchableOpacity style={this._get_status_style(1)}
                          onPress={() => (this._filter_status(1))}>
          <Text style={styles.filter_status_text}>完成</Text>
        </TouchableOpacity>
      </View>
    )
  };

  render() {
    const {loading, data} = this.state;
    if (loading) {
      return <Loading/>
    } else {
      return (
        <View bounces={false} style={{flex: 1}}>
          {this._topButton()}
          {Helper.listBlankInfo(data)}
          <FlatList
            data={data}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            refreshing={loading}
            onRefresh={this.refresh}
            onEndReachedThreshold={0.1}
            onEndReached={this.Flip}
          />
        </View>
      )
    }

  }
}

export default Executions